<template>
  <div>
    <el-row>
      <el-col :span="8" :offset="8">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px">
          <el-form-item label="推荐类别">
            <el-select v-model="region" placeholder="请选择类别" style="width:450px">
              <el-option label="网络正能量内容创作者(含账号)" value="网络正能量内容创作者(含账号)"></el-option>
              <el-option label="网络正能量传播者(含账号和平台)" value="网络正能量传播者(含账号和平台)"></el-option>
              <el-option label="网络空间的正能量公众人物" value="网络空间的正能量公众人物"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="作品链接" prop="link">
            <el-input
              placeholder="https://"
              v-model="ruleForm.link"
              maxlength="200"
              clearable>
            </el-input>
          </el-form-item>
          <el-form-item label="首发平台" prop="platform">
            <el-input
              placeholder="请输入首发平台具体名称"
              v-model="ruleForm.platform"
              maxlength="20"
              clearable>
            </el-input>
          </el-form-item>
          <el-form-item label="作品简介" prop="intro">
            <el-input
              type="textarea"
              placeholder="请输入作品简介(不超过50字)"
              v-model="ruleForm.intro"
              maxlength="50"
              show-word-limit
            >
            </el-input>
          </el-form-item>
          <el-form-item label="社会效果" prop="effect">
            <el-input
              type="textarea"
              placeholder="请输入社会效果(不超过50字)"
              v-model="ruleForm.effect"
              maxlength="50"
              show-word-limit
              clearable>
            </el-input>
          </el-form-item>
          <br>
          <br>
          <el-form-item >
          <el-upload
          class="upload-demo"
          action="/animeVedio/upload"
          :data = "uploadData"
          :before-upload = "beforeUpload"
          :on-remove="handleRemove"
          multiple
          :limit="1"
          :file-list="fileList">
          <el-button  type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">限制上传1个文件，格式为mp4/flv/wmv/ts</div>
          </el-upload>
            </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">下一步</el-button>
          </el-form-item>
        </el-form>

      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'AnimeVedio',
  data () {
    return {
      region: '',
      pstatus: 1,
      tableId: '',
      fileList: [],
      ruleForm: {
        link: '',
        platform: '',
        intro: '',
        effect: ''
      },
      rules: {
        link: [
          {required: true, message: '请输入作品链接', trigger: 'blur'},
          {max: 200, message: '最大长度为200', trigger: 'blur'},
          // eslint-disable-next-line no-useless-escape
          {pattern: /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\*\+,;=.]+$/, message: '请输入正确的网络链接'}
        ],
        platform: [
          {required: true, message: '请输入首发平台', trigger: 'blur'},
          {max: 20, message: '最大长度为20', trigger: 'blur'}
        ],
        intro: [
          {required: true, message: '请输入作品介绍', trigger: 'blur'},
          {max: 50, message: '最大长度为50', trigger: 'blur'}
        ],
        effect: [
          {required: true, message: '请输入社会效果', trigger: 'blur'},
          {max: 50, message: '最大长度为50', trigger: 'blur'}
        ]
      },
      uploadData: {
        id: ''
      }
    }
  },
  created: function () {
    this.createAnimeVedio()
  },
  methods: {
    onSubmit: function () {
      let routepath = '/animeVedio/' + this.tableId
      this.$axios.put(routepath, {
        recomType: this.region,
        platform: this.ruleForm.platform,
        pstatus: this.pstatus,
        workIntro: this.ruleForm.intro,
        workUrl: this.ruleForm.link,
        effect: this.ruleForm.effect
      })
      // console.info(this.$axios.get('api/animeVedio', {params: {id: 13}}))
    },
    createAnimeVedio: function () {
      // 页面创建时获取上个页面路由传过来的ID值
      this.tableId = this.$route.params.id
      this.uploadData.id = this.$route.params.id
      console.info(this.$route)
      console.info(this.tableId)
      this.$axios.post('/animeVedio', {id: this.tableId, pstatus: this.pstatus})
      console.info('test')
    },
    beforeUpload (file) {
      console.log(file)
      let fileName = file.name
      var suffix = ''
      var result = ''
      try {
        let flieArr = fileName.split('.')
        suffix = flieArr[flieArr.length - 1]
      } catch (err) {
        suffix = ''
      }
      if (!suffix) {
      }
      var imglist = ['mp4', 'flv', 'wmv', 'avi', 'ts', 'MP4', 'FLV', ' WMV', 'AVI', 'TS']
      result = imglist.some(function (item) {
        return item === suffix
      })
      if (!result) {
        this.$message.error('只能上传mp4/flv/wmv/ts格式的文件')
        return false
      }
      const isLt10M = file.size / 1024 / 1024 < 20
      if (!isLt10M) {
        this.$message.error('文件大小不能超过20M！')
        return false
      }
    }
  }
}

</script>

<style scoped>

</style>
